let wechatUserId = sessionStorage.getItem("userId");
let companyId = sessionStorage.getItem("companyId");
let dataType = 2011;
let myChart = null;
let myChart2 = null;
// 当前选中的柱子索引
let currentSelectedIndex = null;
let currentSelectedIndex2 = null;
let specialGroupTitle = '<span style="color: red;font-size: small;">（点击显示/隐藏设备）</span>';
let userModuleIdList = sessionStorage.getItem("userModuleIdList");

$(function () {
    if (null === wechatUserId || wechatUserId === '') {
        wechatUserId = sessionStorage.getItem('loginWeChatUserId');
    } else {
        sessionStorage.setItem('loginWeChatUserId', wechatUserId);
    }

    // 初始化选项卡
    initTabs();

    let defaultDataType = sessionStorage.getItem('selectDataType');

    if (null !== defaultDataType && !isNaN(defaultDataType)) {
        changeDataType(defaultDataType);
    } else {
        changeDataType(2011);
    }

    if (userModuleIdList.includes('@' + alarmReportIndex + '@')) {
        loadReportData();
    } else {
        $('#alarmReportDiv').css('display', 'none').next().css('display', 'none');
    }

    if (userModuleIdList.includes('@' + specialGroupIndex + '@')) loadSpecialGroup();

    // 窗口大小改变时自适应
    window.addEventListener('resize', () => {
        myChart.resize();
        $('#customLegend').css('display', 'none');
    });

    if (userModuleIdList.includes('@' + companyEmissionIndex + '@')) {
        // 初始化
        initChart();
        updateChart(1);
        updateChart(2);
    } else {
        $('#balanceTitle').css('display', 'none');
        $('#balanceTable').css('display', 'none');
        $('#balanceTable2').css('display', 'none');
    }
});

// 卡片点击效果
document.querySelectorAll('.data-card').forEach(card => {
    card.addEventListener('click', function () {
        this.style.transform = 'scale(0.98)';
        setTimeout(() => {
            this.style.transform = '';
        }, 200);
        // 这里可以添加卡片点击后的业务逻辑
    });
});

// 初始化图表
function initChart() {
    const chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);

    myChart2 = echarts.init(document.getElementById('main2'));

    const option = {
        tooltip: {
            trigger: 'axis', axisPointer: {
                type: 'shadow'
            }
        }, legend: {
            show: false // 隐藏默认图例
        }, xAxis: {
            type: 'category', axisLabel: {
                rotate: 45, fontSize: 12
            }
        }, yAxis: {
            type: 'value'
        }, series: [{
            name: '已用量', type: 'bar', stack: 'total', itemStyle: {
                color: '#e35c5c'
            }
        }, {
            name: '可用量', type: 'bar', stack: 'total', itemStyle: {
                color: '#4CAF50'
            }
        }]
    };

    myChart.setOption(option);
    myChart2.setOption(option);

    // 隐藏图例当点击其他位置时
    chartDom.addEventListener('click', (e) => {
        if (!e.target.closest('.echarts-bar')) {
            $('#customLegend').css('display', 'none');
            $('#customLegend2').css('display', 'none');
        }
    });
}

// 更新图表
function updateChart(type) {
    $.post(serverUrl + ':' + serverPort + serverName + '/deviceSummary/deviceDataStatic', {
        companyId: sessionStorage.getItem('companyId'), type: type
    }).done(function (obj) {
        let result = JSON.parse(obj);

        const names = [];
        const totalUsedValues = [];
        const totalUnusedValues = [];

        if (result.code === 0 && result.data.length > 0) {
            $.each(result.data, function (i, item) {
                names.push(item.codeDictName);
                totalUsedValues.push(item.totalUsedCount / 1000);
                totalUnusedValues.push(item.totalUnusedCount / 1000);
            });

            // 图表配置
            const option = {
                tooltip: {
                    trigger: 'axis', axisPointer: {type: 'shadow'}, backgroundColor: 'rgba(0,0,0,0.7)',  // 添加背景色
                    borderWidth: 0,                      // 去除边框
                    padding: 10,                         // 增加内边距
                    textStyle: {
                        color: '#FFF', fontSize: 12
                    }, formatter: function (params) {
                        // 正确获取值并转为数值类型
                        const used = Number(params[0].value);    // 已使用量（系列0）
                        const unused = Number(params[1].value);   // 未使用量（系列1）
                        const category = params[0].name;

                        // 计算总量和使用率（防止除0错误）
                        const total = used + unused;
                        const rate = total > 0 ? Math.min(Math.round((used / total) * 100), 100) : 0;

                        // 格式化工件内容
                        return `<div style="font-weight:bold;">${category}</div><div><span style="display:inline-block;width:10px;height:10px;background:#66CC00;"></span>未使用: ${unused.toLocaleString()}T</div><div style="margin-top:5px;"><span style="display:inline-block;width:10px;height:10px;background:#FF3333;"></span>已使用: ${used.toLocaleString()}T</div><div style="margin-top:5px;border-top:1px solid #555;padding-top:5px;">使用率: <span style="color:#FFD700;font-weight:bold;">${rate}%</span></div><div>总量: <b>${total.toLocaleString()}</b>T</div>`;
                    }, // 关键设置：手动控制tooltip显示
                    show: true, alwaysShowContent: false, triggerOn: 'click', hideDelay: 0
                }, legend: {
                    data: ['已使用量', '未使用量'], textStyle: {
                        color: '#808080'
                    }, right: 20, top: 10, itemWidth: 16, itemHeight: 8
                }, grid: {
                    left: '3%', right: '4%', bottom: '10%', top: '15%', containLabel: true
                }, xAxis: {
                    type: 'category', data: names, axisLine: {lineStyle: {color: '#ccc'}}, axisLabel: {color: '#666', fontSize: 12}, axisTick: {show: false}
                }, yAxis: {
                    type: 'value', name: '吨(T)', nameTextStyle: {color: '#666', fontSize: 12}, axisLine: {show: false}, axisLabel: {color: '#666', fontSize: 12}, splitLine: {lineStyle: {color: 'rgba(0,0,0,0.05)'}}
                }, series: [{
                    name: '已使用量', type: 'bar', stack: 'stack1', data: totalUsedValues, barWidth: '35%', itemStyle: {
                        color: '#FF3333', borderRadius: [0, 0, 6, 6]
                    }, label: {
                        show: false, position: 'top', formatter: '{c}', color: '#FF3333', fontWeight: 'bold', fontSize: 12
                    }, emphasis: {
                        itemStyle: {
                            shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 10
                        }
                    }
                }, {
                    name: '未使用量', type: 'bar', stack: 'stack1', data: totalUnusedValues, barWidth: '35%', itemStyle: {
                        color: '#66CC00', borderRadius: [6, 6, 0, 0]
                    }, label: {
                        show: false, position: 'insideTop', formatter: '{c}', color: '#333', fontWeight: 'bold', fontSize: 12
                    }, emphasis: {
                        itemStyle: {
                            shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 10
                        }
                    }
                }], animation: true, animationDuration: 800, animationEasing: 'cubicOut'
            };

            // 使用刚指定的配置项和数据显示图表。
            if (Number(type) === 1) {
                myChart.setOption(option);

                // 关键：实现点击柱子持续显示tooltip
                myChart.on('click', function (params) {
                    // 如果点击的是柱子
                    if (params.componentType === 'series' && params.seriesType === 'bar') {
                        currentSelectedIndex = params.dataIndex;

                        // 显示tooltip
                        myChart.dispatchAction({
                            type: 'showTip', seriesIndex: 0, dataIndex: currentSelectedIndex
                        });
                    }
                });

                // 点击空白区域隐藏tooltip
                myChart.getZr().on('click', function (event) {
                    // 如果没有点击到图形元素
                    if (!event.target) {
                        currentSelectedIndex = null;
                        myChart.dispatchAction({
                            type: 'hideTip'
                        });
                    }
                });

                // 响应窗口大小变化
                window.addEventListener('resize', function () {
                    myChart.resize();
                });

                $('#balanceTitle').css('display', '');
                $('#balanceTable').css('display', '');
            } else {
                myChart2.setOption(option);

                // 关键：实现点击柱子持续显示tooltip
                myChart2.on('click', function (params) {
                    // 如果点击的是柱子
                    if (params.componentType === 'series' && params.seriesType === 'bar') {
                        currentSelectedIndex2 = params.dataIndex;

                        // 显示tooltip
                        myChart2.dispatchAction({
                            type: 'showTip', seriesIndex: 0, dataIndex: currentSelectedIndex2
                        });
                    }
                });

                // 点击空白区域隐藏tooltip
                myChart2.getZr().on('click', function (event) {
                    // 如果没有点击到图形元素
                    if (!event.target) {
                        currentSelectedIndex2 = null;
                        myChart2.dispatchAction({
                            type: 'hideTip'
                        });
                    }
                });

                // 响应窗口大小变化
                window.addEventListener('resize', function () {
                    myChart2.resize();
                });

                $('#balanceTitle2').css('display', '');
                $('#balanceTable2').css('display', '');
            }
        } else {
            // 没有数据则移除表格控件
            if (Number(type) === 1) {
                $('#balanceTitle').css('display', 'none');
                $('#balanceTable').css('display', 'none');
            } else {
                $('#balanceTitle2').css('display', 'none');
                $('#balanceTable2').css('display', 'none');
            }
        }
    }).fail(function (xhr, status, error) {
        console.log("请求失败！");
        console.log("错误信息：" + error);

        // 没有数据则移除表格控件
        if (Number(type) === 1) {
            $('#balanceTitle').css('display', 'none');
            $('#balanceTable').css('display', 'none');
        } else {
            $('#balanceTitle2').css('display', 'none');
            $('#balanceTable2').css('display', 'none');
        }
    });
}

function changeDataType(type) {
    dataType = type;

    // 根据选中的数据类型自动改变样式
    changeTab(type);

    loadDeviceList();
}

function loadDeviceList() {
    showLoading();

    // 先根据公司ID和用户ID加载出所有的设备列表
    $.post(serverUrl + ':' + serverPort + serverName + '/companyUser/iFindDeviceListByUserIdAndCompanyId', {
        userId: wechatUserId, companyId: companyId, type: dataType
    }, function (result) {
        hideLoading();

        analyzeDeviceData(result, 1);
    });
}

function createTableHtml(deviceDataList) {
    let content = '';

    $.each(deviceDataList, function (index, item) {
        if (item.lastDataMap.valueList.length > 0) {
            // 创建卡片头部
            content += '<div class="data-card" onclick="bindClickEvent(\'' + item.code + '\',' + item.deviceType + ')">';
            content += '<div class="card-header">';

            if (typeof item.name !== "undefined") {
                content += '<div class="device-name">' + item.name + '</div>';
            } else {
                content += '<div class="device-name"> - </div>';
            }

            content += '</div>';

            // 先对所有属性进行过滤，根据显示状态决定是否展示
            let topDataList = [];
            $.each(item.lastDataMap.valueList, function (o, obj) {
                if (obj.status === 1) topDataList.push(obj);
            });

            // 确保时间属性放在第一位
            let timeData = {};
            let otherData = {};
            let dataList = [];
            for (let n = 0; n < topDataList.length; n++) {
                if (topDataList[n].code === 'CP_DataTime') {
                    timeData = topDataList[n];
                } else {
                    if (typeof otherData.name === "undefined") {
                        otherData = topDataList[n];
                    } else {
                        dataList.push(topDataList[n]);
                    }
                }
            }

            content += '<div class="data-row">';
            content += '<div class="data-item">';
            content += '<span>' + timeData.name + '</span>';
            content += '<div class="data-value">' + changeStrTime(timeData.value) + '</div>';
            content += '</div>';

            if (typeof otherData.name !== "undefined") {
                content += '<div class="data-item">';
                content += '<span>' + otherData.name + '</span>';
                content += '<div class="data-value">' + otherData.value + " " + otherData.unit + '</div>';
                content += '</div>';
            }

            content += '</div>';

            // 绑定内部数据
            for (let n = 0; n < dataList.length; n += 2) {
                // 确保不越界：当数组长度为奇数时，最后一组可能只有一个元素
                const row = [dataList[n], dataList[n + 1]].filter(element => element !== undefined); // 过滤掉undefined（可选）

                content += '<div class="data-row">';

                $.each(row, function (o, obj) {
                    content += '<div class="data-item">';
                    content += '<span>' + obj.name + '</span>';

                    if (obj.value !== "undefined") {
                        content += '<div class="data-value">' + obj.value + " " + obj.unit + '</div>';
                    } else {
                        content += '<div class="data-value"> - </div>';
                    }

                    content += '</div>';
                });

                content += '</div>';
            }

            content += '</div>';
        } else {
            // 创建卡片头部
            content += '<div class="data-card">';
            content += '<div class="card-header">';

            if (typeof item.name !== "undefined") {
                content += '<div class="device-name">' + item.name + '</div>';
            } else {
                content += '<div class="device-name"> - </div>';
            }

            content += '</div>';

            // 开始拼接数据
            content += '<div class="data-row" style="grid-template-columns: none;">';
            content += '<div class="data-item">';
            content += '<span style="color: red;font-size: 16px;line-height: 30px;">设备已下线，数据功能已停止</span>';
            content += '</div>';
            content += '</div>';
            content += '</div>';
        }
    });

    return content;
}

// 加载分析报告
function loadReportData() {
    showLoading();

    // 先根据公司ID和用户ID加载出所有的设备列表
    // type为1=该公司的总体情况报告，2=制定某个设备的情况报告，3=指定某个设备的指定参数的情况报告
    $.post(serverUrl + ':' + serverPort + serverName + '/alarmMessage/iGetReportByParams', {
        companyId: companyId, type: 1
    }, function (result) {
        hideLoading();

        let obj = JSON.parse(result);

        $('#reportContent').html(obj.data);
    });
}

function analyzeDeviceData(result, dataType) {
    let obj = JSON.parse(result);

    if (obj.code === 0) {
        if (dataType === 1) {
            let airData = [];
            let waterData = [];

            $.each(obj.data, function (i, item) {
                // 循环读取设备信息并放入对应的集合中
                switch (item.deviceType) {
                    case 1:
                        // 废气设备
                        airData.push(item);
                        break;
                    case 2:
                        // 废水设备
                        waterData.push(item);
                        break;
                }
            });

            // 自动检测，如果废气设备数组为空，则隐藏废气设备列表模块，废水设备同理
            if (airData.length === 0) {
                $('#airDeviceDiv').prev().css('display', 'none');
                $('#airDeviceDiv').css('display', 'none');
            } else {
                const htmlContent = createTableHtml(airData);

                if (htmlContent.trim().length > 0) {
                    $('#airDeviceDiv').html(htmlContent);
                } else {
                    $('#airDeviceDiv').prev().css('display', 'none');
                    $('#airDeviceDiv').css('display', 'none');
                }
            }

            if (waterData.length === 0) {
                $('#waterDeviceDiv').prev().css('display', 'none');
                $('#waterDeviceDiv').css('display', 'none');
            } else {
                const htmlContent = createTableHtml(waterData);

                if (htmlContent.trim().length > 0) {
                    $('#waterDeviceDiv').html(htmlContent);
                } else {
                    $('#waterDeviceDiv').prev().css('display', 'none');
                    $('#waterDeviceDiv').css('display', 'none');
                }
            }
        } else {
            // 特别分组
            if (obj.data.length === 0) {
                $('#specialDeviceDiv').prev().css('display', 'none');
                $('#specialDeviceDiv').css('display', 'none');
            } else {
                let showStatus = sessionStorage.getItem('specialGroupStatus');

                $.each(obj.data, function (i, item) {
                    let specialData = [];

                    $.each(item.deviceList, function (o, object) {
                        specialData.push(object);
                    });

                    const htmlContent = createTableHtml(specialData);

                    if (htmlContent.trim().length > 0) {
                        const newDeviceTitleDiv = $('#specialDeviceDiv').prev().clone();
                        newDeviceTitleDiv.children().first().html(item.content + specialGroupTitle);
                        newDeviceTitleDiv.css('display', '');

                        const newDeviceDiv = $('#specialDeviceDiv').clone();
                        newDeviceDiv.prop('id', 'specialDeviceDiv' + i);
                        newDeviceDiv.addClass("specialGroup");

                        if (Number(showStatus) === 0) {
                            newDeviceDiv.css('display', 'none');
                        } else {
                            newDeviceDiv.css('display', '');
                        }

                        newDeviceDiv.html(htmlContent);

                        $('#specialDeviceDiv').after(newDeviceDiv);
                        $('#specialDeviceDiv').after(newDeviceTitleDiv);
                    } else {
                        $('#specialDeviceDiv').prev().css('display', 'none');
                        $('#specialDeviceDiv').css('display', 'none');
                    }
                });
            }
        }
    }
}

function changeSpecialGroupStatus(self) {
    let showStatus = sessionStorage.getItem('specialGroupStatus');

    if (showStatus === '0') {
        sessionStorage.setItem('specialGroupStatus', '1');

        $(self).next().css('display', '');
    } else {
        sessionStorage.setItem('specialGroupStatus', '0');

        $(self).next().css('display', 'none');
    }
}

// 加载分析报告
function loadSpecialGroup() {
    showLoading();

    $.post(serverUrl + ':' + serverPort + serverName + '/system/specialGroup/childListForWeb', {
        userId: wechatUserId, companyId: companyId
    }, function (result) {
        hideLoading();

        analyzeDeviceData(result, 2);
    });
}

function bindClickEvent(deviceCode, type) {
    sessionStorage.setItem('companyId', companyId);
    sessionStorage.setItem('userId', wechatUserId);
    sessionStorage.setItem('deviceCode', deviceCode);
    sessionStorage.setItem('deviceType', type);
    sessionStorage.setItem('selectDataType', dataType);

    window.location.href = 'wx/project/device';
}